<template>
	<el-container>
		<div class="safasf"></div>
		<el-aside v-if="isMenu === false && menuVisible">
			<side-menu
				:menu="menu"
				class="menu-item-contaner"
				@gotoUrl="gotoUrl"
			/>
		</el-aside>
		<el-container>
			<el-header
				style="height: 8%"
				v-if="isMenu === false"
			>
				<div class="title-line">
					<div
						style="padding: 0 15px"
						@click="changeMenu"
					>
						<svg
							:class="{ 'is-active': menuVisible }"
							class="hamburger"
							viewBox="0 0 1024 1024"
							xmlns="http://www.w3.org/2000/svg"
							width="36"
							height="36"
						>
							<path
								d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"
							/>
						</svg>
					</div>
					<div class="user-message-contaner">
						<span
							class="user-image"
							v-if="userData.student_img == ''"
						>
							<img
								src="~@/assets/imgs/icon/userIcon.png"
								style="object-fit: cover"
							/>
						</span>
						<span
							class="user-image"
							v-else
						>
							<el-image
								style="width: 40px"
								:src="userData.student_img"
								:fit="fit"
							></el-image>
						</span>
						<div class="user-name">
							{{ userData.name || "" }}
						</div>
						<div
							class="login-out"
							@click="signOut"
						>
							<span>退出</span>
						</div>
					</div>
				</div>
			</el-header>
			<el-main>
				<iframe
					v-if="isExternalLink"
					id="iframeView"
					:src="iframeURL"
					frameborder="0"
					width="100%"
					height="100%"
				/>
				<router-view
					v-else
					:key="$route.fullPath"
					class="router-box"
				/>
			</el-main>

			<login-out-pop
				:show="showLoginOutPop"
				@handle-login-out-cancel="handleLoginOutCancel"
			/>
		</el-container>
	</el-container>
</template>

<script>
	import LoginOutPop from "./components/LoginOutPop";
	import { merge } from "lodash-es";
	import { titleheight, realHeight } from "@/config/frame";
	import { mapState, mapActions } from "vuex";
	import SideMenu from "./components/SideMenu";
	import { gradientColors } from "@/utils/tools";
	import { asyncRouterMap, asyncRouterMap2 } from "@/router";

	export default {
		name: "Frame",
		components: {
			LoginOutPop,
			SideMenu,
		},
		data() {
			return {
				/**
				 * 滚动条
				 */
				scollOptions: {
					scrollPanel: {
						scrollingX: false,
						scrollingY: true,
					},
					vuescroll: {
						mode: "native",
						sizeStrategy: "percent",
						detectResize: true,
						zooming: false,
					},
					bar: {
						onlyShowBarOnScroll: false,
						background: "#999999",
						opacity: 1,
					},
				},
				isExternalLink: false,
				iframeURL: "",
				menus: [],
				showLoginOutPop: false,
				selectMenu: null,
				menuHeight: window.screen.height - titleheight,
				// menuHeight: 54 * window.screenVwConstant.convertRate,
				title: "城市停车开放平台",
				menu: asyncRouterMap,
				userData: "",
				isMenu: false,
				menuVisible: true,
			};
		},
		computed: {
			...mapState({
				loginInfo: (state) => state.user.loginInfo,
				titleheight: (state) => state.frame.titleheight + "px",
				realHeight: (state) => state.frame.realHeight + "px",
			}),
			titles() {
				return this.title.split("");
			},
			colors() {
				let length = this.title.length;
				if (length <= 4) {
					return ["#0097fe", "#0097fe", "#0097fe", "#0097fe"];
				}
				let step = Math.ceil(length / 2);
				let colorRang = gradientColors("#0097fe", "#00aee7", step);
				let colors = [];
				for (let i = 0; i < length; i++) {
					if (i < step) {
						colors.push(colorRang[i]);
					} else {
						let diff = length % 2 === 0 ? 1 : 2;
						let index = 2 * step - i - diff;
						colors.push(colorRang[index]);
					}
				}
				return colors;
			},
		},
		created() {
			this.userData = localStorage.getItem("userData");
			this.userData = JSON.parse(this.userData);
			if (localStorage.getItem("userData")) {
				if (this.userData.name == "admin") {
					this.menu = asyncRouterMap;
				} else {
					this.menu = asyncRouterMap2;
				}
			} else {
				this.menu = asyncRouterMap2;
			}
			if (
				this.$route.query.isMenu == undefined ||
				this.$route.query.isMenu == ""
			) {
				this.isMenu = false;
			} else {
				if (
					this.$route.query.isMenu == true ||
					this.$route.query.isMenu == "true"
				) {
					this.isMenu = true;
				} else {
					this.isMenu = this.$route.query.isMenu;
				}
			}
		},
		watch: {},
		mounted() {
			this.setTitleheight(titleheight);
		},
		methods: {
			...mapActions(["setTitleheight"]),
			changeMenu() {
				this.menuVisible = !this.menuVisible;
			},
			gotoUrl(data) {
				this.selectMenu = data.__full_path__;
				if (data.isExternal) {
					this.isExternalLink = true;
					this.iframeURL = data.path;
				} else {
					this.isExternalLink = false;
					this.iframeURL = "";
					this.$router.push({
						path: data.__full_path__,
						query: merge(
							{
								t: +new Date(), // 保证每次点击路由的query项都是不一样的，确保会重新刷新view
							},
							data.meta.query
						),
					});
				}
			},
			signOut() {
				this.showLoginOutPop = true;
			},
			handleLoginOutCancel() {
				this.showLoginOutPop = false;
			},
		},
	};
</script>
<style lang="scss" scoped>
	@import "@/styles/animate";
	.frame {
		width: 100%;
		height: 100%;
		.menu-line {
			position: absolute;
			top: 0px;
			left: 0;
			width: 250px;
			height: 100%;
			font-size: 18px;
			// padding-top: 1px;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			transition: height 500ms linear;
			border-right: 1px solid #ededed;
		}
		.head {
			padding-left: 250px;
			height: 8%;
			.title-container {
				width: 100%;
				height: 100%;
				z-index: 10;
				.icon-container {
					position: absolute;
					top: 27px;
					left: 0;
					display: flex;
					align-items: center;
					justify-content: center;
					height: 26px;
					width: 34px;
					background: #1c242e;
					cursor: pointer;
					opacity: 0.5;
					&:hover {
						opacity: 1;
					}
					.icon-arrow-down {
						width: 16px;
						height: 9px;
						background: url(~@/assets/imgs/icon/icon-arrow-up.png) no-repeat;
						background-size: 100%;
						transform: rotate(180deg);
					}
				}
			}
		}
		.animated {
			-webkit-animation-duration: 2s;
			animation-duration: 2s;
			-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
		}
		.content {
			width: 100%;
			height: 92%;
			padding-left: 250px;
			// height: calc(100% - 60px);
			// height:-moz-calc(100% - 60px);
			// height:-webkit-calc(100% - 60px);
			box-sizing: border-box;
			transition: padding-top 500ms linear;
			background-color: #f0f3f6;
			overflow: auto;
		}
	}
	.el-container {
		height: 100%;
		display: flex;
		flex-direction: row;
		flex: 1;
		flex-basis: auto;
		box-sizing: border-box;
		min-width: 0;
		.el-aside {
			height: 100%;
			.menu-item-contaner {
				flex: 1 1 auto;
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
			}
		}
		.el-container {
			flex-direction: column;
			.el-header {
				height: 8%;
				border-bottom: solid 1px #e7e7e7;
				.title-line {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 100%;
					height: 100%;
					background: transparent;
					.hamburger {
						cursor: pointer;
						display: inline-block;
						vertical-align: middle;
						width: 25px;
						height: 25px;
						color: #999999;
					}
					.hamburger.is-active {
						transform: rotate(180deg);
					}
					.user-message-contaner {
						flex: 0 0 auto;
						height: 100%;
						display: flex;
						justify-content: flex-end;
						align-items: center;
						.user-image {
							display: inline-block;
							// border-radius: 50%;
							// box-sizing: border-box;
							// text-align: center;
							// overflow: hidden;
							// color: #fff;
							// background: #c0c4cc;
							// width: 40px;
							// height: 40px;
							// line-height: 40px;
							// font-size: 14px;
							vertical-align: middle;
							margin-right: 10px;
							img {
								display: inline-block;
								height: 100%;
								width: 35px;
								vertical-align: middle;
							}
						}
						.user-name {
							font-size: 18px;
							color: #333333;
						}
						.login-out {
							font-size: 18px;
							color: #85aeff;
							margin: 0 50px;
							cursor: pointer;
							display: flex;
							align-items: center;
							justify-content: flex-end;
							.login-out-icon {
								background: url(~@/assets/imgs/icon/exit.png) no-repeat;
								background-size: 100%;
								width: 23px;
								height: 25px;
								margin-left: 10px;
							}
						}
					}
				}
			}
			.el-main {
				height: 92%;
				background-color: #f0f2f5;
				overflow: auto;
			}
		}
	}
</style>
